<template>
  <MyDialog title="Filter" :submit="onSubmit" >
    <q-card>
      <q-card-section class="q-gutter-y-sm row">
        <q-item-label class="col-4 fal">Section: </q-item-label>
        <q-select
          borderless
          v-model="filterForm.data.section"
          :options="logTypeOpts"
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
        >
        </q-select>

        <q-item-label
          v-if="!isDepot"
        class="col-4 fal">Sub-Section: </q-item-label>
        <q-select
        v-if="!isDepot"

          borderless
          v-model="filterForm.data.sub_section"
          :options="categoryTypeOpts"
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
        >
        </q-select>

        <q-item-label class="col-4 fal">Action: </q-item-label>
        <q-select
          borderless
          v-model="filterForm.data.action"
          :options="actionTypeOpts"
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
        >
        </q-select>

        <q-item-label class="col-4 fal">Stock Code: </q-item-label>
        <q-select
          borderless
          v-model="filterForm.data.stock_code"
          :options="stockCodeOpts"
          use-input
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
          @filter="filterSCFn"
        >
        </q-select>
        <q-item-label class="col-4 fal">Serial No: </q-item-label>
        <q-select
          borderless
          v-model="filterForm.data.serial_no"
          :options="serialNoOpts"
          use-input
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
          @filter="filterSNFn"
        >
        </q-select>
        <q-item-label class="col-4 fal">Job Order</q-item-label>
        <q-select
          borderless
          v-model="filterForm.data.job_order"
          :options="orderOpts"
          input-debounce="0"
          hide-bottom-space
          @filter="filterJOFn"
          use-input
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
        >
        </q-select>

        <q-item-label class="col-4 fal">Date Form</q-item-label>

        <div class="col-8 input-css">
          <q-input borderless dense v-model="filterForm.data.dateFrom">
            <template v-slot:prepend>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy>
                  <q-date
                    v-model="filterForm.data.dateFrom"
                    mask="YYYY-MM-DD HH:mm"
                  >
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="Close" color="primary" flat />
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-icon>
            </template>

            <template v-slot:append>
              <q-icon name="access_time" class="cursor-pointer">
                <q-popup-proxy>
                  <q-time
                    v-model="filterForm.data.dateFrom"
                    mask="YYYY-MM-DD HH:mm"
                    format24h
                  >
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="Close" color="primary" flat />
                    </div>
                  </q-time>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>

        <q-item-label class="col-4 fal">Date To</q-item-label>
        <div class="col-8 input-css">
          <q-input borderless dense v-model="filterForm.data.dateTo">
            <template v-slot:prepend>
              <q-icon name="event" class="cursor-pointer">
                <q-popup-proxy>
                  <q-date
                    v-model="filterForm.data.dateTo"
                    mask="YYYY-MM-DD HH:mm"
                  >
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="Close" color="primary" flat />
                    </div>
                  </q-date>
                </q-popup-proxy>
              </q-icon>
            </template>

            <template v-slot:append>
              <q-icon name="access_time" class="cursor-pointer">
                <q-popup-proxy>
                  <q-time
                    v-model="filterForm.data.dateTo"
                    mask="YYYY-MM-DD HH:mm"
                    format24h
                  >
                    <div class="row items-center justify-end">
                      <q-btn v-close-popup label="Close" color="primary" flat />
                    </div>
                  </q-time>
                </q-popup-proxy>
              </q-icon>
            </template>
          </q-input>
        </div>
      </q-card-section>
    </q-card>
  </MyDialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import MyDialog from '../container/MyDialog.vue';
import dateIcon from 'src/assets/style/date.png';
import { FilterForm } from 'src/services/type';
import { getOrderOpts, getSNbySC } from 'src/services/activityLogService';

const props = defineProps<{
  section: string
  action:string
  sub_section: string
  stock_code: string
  serial_no: string
  job_order: string
  dateFrom: string
  dateTo: string
}>()

const filterForm = reactive<{
  data: FilterForm;
}>({
  data: {
    section: props.section,
    action:props.action,
    sub_section: props.sub_section,
    stock_code: props.stock_code,
    serial_no: props.serial_no,
    job_order: props.job_order,
    dateFrom: props.dateFrom,
    dateTo: props.dateTo,
  },
});

const isDepot = ref(false)

const logTypeOpts = ref<string[]>([]);
const actionTypeOpts = ref<string[]>([]);
const actionTypeOptsOri = ref<string[]>([]);
const categoryTypeOpts = ref<string[]>([]);

const stockCodeStringOptions = ref<string[]>([]);
const stockCodeOpts = ref<string[]>([]);

const serialNoStringOptions = ref<string[]>([]);
const serialNoOpts = ref<string[]>([]);

const orderStringOptions = ref<string[]>([]);
const orderOpts = ref<string[]>([]);

const emit = defineEmits(['filter']);

function onSubmit() {
  emit('filter', filterForm);
}

watch(()=> filterForm.data.stock_code,(stock_code)=>{
  filterSNbySC(stock_code)
})

watch(()=> filterForm.data.section,(section)=>{
  if (section=='depot'){
    actionTypeOpts.value = [...actionTypeOpts.value.filter((i)=>{
      return i.includes('fitment')
    })]
    isDepot.value = true
  }else{
    console.log(actionTypeOpts.value);
    
    actionTypeOpts.value = actionTypeOptsOri.value
    isDepot.value = false

  }
})

async function initOrderOpts() {
  const res = await getOrderOpts();
  console.log(res);
  
  orderStringOptions.value = [...res.jo];
  orderOpts.value = [...res.jo];

  stockCodeStringOptions.value = [...res.stock_codes];
  stockCodeOpts.value = [...res.stock_codes];

  serialNoStringOptions.value = [...res.serial_nos];
  serialNoOpts.value = [...res.serial_nos];

  logTypeOpts.value = [...res.log_types]

  actionTypeOpts.value = [...res.action_types]
  actionTypeOptsOri.value = [...res.action_types]

  categoryTypeOpts.value = [...res.category_types]
}

initOrderOpts();

async function filterSNbySC(stock_code:string) {
  const res = await getSNbySC(stock_code)
  serialNoStringOptions.value = [...res.serial_nos];
  serialNoOpts.value = [...res.serial_nos];
}

function filterJOFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      orderOpts.value = [...orderStringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    orderOpts.value = orderStringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}

function filterSCFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      stockCodeOpts.value = [...stockCodeStringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    stockCodeOpts.value = stockCodeStringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}

function filterSNFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      serialNoOpts.value = [...serialNoStringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    serialNoOpts.value = serialNoStringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}
</script>
